<script lang="ts">
	import type { PageData } from './$types'
	import { onDestroy, onMount } from 'svelte'
	import { Tabs, TabItem } from 'flowbite-svelte'
	import { UserCircleSolid } from 'flowbite-svelte-icons'
	import { goto } from '$app/navigation'
	import KlineTable from '$lib/KlineTable.svelte'
	import SecurityChart from '$lib/SecurityChart.svelte'
	import KlineTableSlider from '$lib/KlineTableSlider.svelte'
	import type { Unsubscriber } from 'svelte/motion'
	import { klineRequestStore, klineResultStore } from '$lib/FudaStore'
	import { get_kline_flats } from '$lib/Backend'

	let securityChart: SecurityChart
	let klineTableSlider: KlineTableSlider

	let subscription: Unsubscriber

	export let data: PageData
	onMount(() => {
		// 订阅 klineResultStore 存储
		subscription = klineRequestStore.subscribe((state) => {
			console.log('(securities/[id]/+page.svelte) klineRequestStore get state changed: ', state)
			get_kline_flats(state.security_id, state.klt, state.page_num, state.page_size)
				.then((klines) => {
					klineResultStore.update((state) => ({
						...state,
						klines: klines || [],
					}))
				})
				.catch((err) => {
					console.log('(securities/[id]/+page.svelte) get_kline_flats error ', err)
				})
				.finally(() => {
					console.log('(securities/[id]/+page.svelte) get_kline_flats finally')
				})

			// get_trend_line_klines(state.security_id, state.klt, state.size).then((klfrs) => {
			// 	if (klfrs && klfrs.klines && klfrs.klines.length > 0) {
			// 		let klines: Kline[] | undefined = klfrs.klines

			// 		console.log('get_trend_line_klines klines:', klines)

			// 		if (klines) {
			// 			trendLineStore.update((state) => ({
			// 				...state,
			// 				lines: [trend_line1],
			// 			}))
			// 		}
			// 	}
			// })
		})
	})

	onDestroy(() => {
		if (subscription) {
			// 销毁订阅
			subscription()
		}
	})
</script>

<div class="bg-gray-200 w-full h-svh">
	<div class="w-full h-9/10">
		<SecurityChart bind:this={securityChart} />
	</div>
	<div class="w-full pt-1 overflow-auto flex flex-col relative h-lvh">
		<Tabs
			tabStyle="full"
			class="flex "
			activeClasses="text-primary-600 bg-gray-100  dark:bg-gray-800 dark:text-primary-500"
			inactiveClasses="text-gray-500  hover:text-gray-600 hover:bg-gray-50 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-300"
			contentClass="bg-gray-50  dark:bg-gray-800"
		>
			<TabItem>
				<div slot="title" class="flex-none flex items-center">
					<UserCircleSolid size="sm" />
					<button tabindex="0">推荐策略</button>
				</div>
				<div class="flex flex-col w-full h-full overflow-auto">
					<table class="w-full border-collapse table-auto">
						<thead>
							<tr
								class="bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider"
							>
								<th>策略名称</th>
								<th>描述</th>
								<th>收益</th>
								<th>平均收益</th>
								<th>最大收益</th>
								<th>最小收益</th>
								<th>顶配证券</th>
								<th class="px-4 py-3 text-center">Ops</th>
							</tr>
						</thead>
						<tbody class="bg-white divide-y divide-gray-200">
							{#each data.strategies as strategy (strategy.id)}
								<tr
									class="hover:bg-gray-50 focus-within:bg-gray-100"
									on:click|preventDefault={() => goto(`/strategies/${strategy.id}/300689`)}
								>
									<td class="whitespace-nowrap">
										<div class="text-sm font-medium text-gray-900">{strategy.name}</div>
									</td>
									<td class="whitespace-nowrap">
										<div class="text-sm text-gray-500">{strategy.description}</div>
									</td>
									<td class="whitespace-nowrap">
										<div class="text-sm text-gray-500">{strategy.yield}</div>
									</td>
									<td class="whitespace-nowrap">
										<div class="text-sm text-gray-500">{strategy.avgYield}</div>
									</td>
									<td class="whitespace-nowrap">
										<div class="text-sm text-gray-500">{strategy.maxYield}</div>
									</td>
									<td class="whitespace-nowrap">
										<div class="text-sm text-gray-500">{strategy.minYield}</div>
									</td>
									<td class="whitespace-nowrap">
										<div class="text-sm text-gray-500">{strategy.topStocks.join(', ')}</div>
									</td>
									<td class="whitespace-nowrap">
										<button class="text-sm text-white px-2 mx-4 border-solid border-2 bg-blue-400"
											>启用</button
										>
										<button class="text-sm text-white px-2 mr-4 border-solid border-2 bg-blue-400"
											>Test</button
										>
									</td>
								</tr>
							{/each}
						</tbody>
					</table>
				</div>
			</TabItem>

			<TabItem title="5分钟线数据">
				<div slot="title" class="flex-none flex items-center">
					<UserCircleSolid size="sm" />
					<button tabindex="0">5分钟</button>
				</div>
				<div class="flex flex-col w-full h-full relative overflow-x-auto">
					<KlineTable klt="M005" />
				</div>
			</TabItem>

			<TabItem title="15分钟线数据">
				<div slot="title" class="flex-none flex items-center">
					<UserCircleSolid size="sm" />
					<button tabindex="0">15分钟</button>
				</div>
				<div class="flex flex-col w-full h-full relative overflow-x-auto">
					<KlineTable klt="M015" />
				</div>
			</TabItem>

			<TabItem title="30分钟线数据">
				<div slot="title" class="flex-none flex items-center">
					<UserCircleSolid size="sm" />
					<button tabindex="0">30分钟</button>
				</div>
				<div class="flex flex-col w-full h-full relative overflow-x-auto">
					<KlineTable klt="M030" />
				</div>
			</TabItem>

			<TabItem title="60分钟线数据">
				<div slot="title" class="flex-none flex items-center">
					<UserCircleSolid size="sm" />
					<button tabindex="0">60分钟</button>
				</div>
				<div class="flex flex-col w-full h-full relative overflow-x-auto">
					<KlineTable klt="M060" />
				</div>
			</TabItem>

			<TabItem open title="日线数据">
				<div slot="title" class="flex-none flex items-center">
					<UserCircleSolid size="sm" />
					<button tabindex="0">日线</button>
				</div>
				<div class="flex flex-col w-full h-full relative overflow-x-auto">
					<KlineTable klt="DAY" />
				</div>
			</TabItem>

			<TabItem title="周线数据">
				<div slot="title" class="flex-none flex items-center">
					<UserCircleSolid size="sm" />
					<button tabindex="0">周线</button>
				</div>
				<div class="flex flex-col w-full h-full relative overflow-x-auto">
					<KlineTable klt="WEEK" />
				</div>
			</TabItem>

			<TabItem title="月线数据">
				<div slot="title" class="flex-none flex items-center">
					<UserCircleSolid size="sm" />
					<button tabindex="0">月线</button>
				</div>
				<div class="flex flex-col w-full h-full relative overflow-x-auto">
					<KlineTable klt="MONTH" />
				</div>
			</TabItem>
		</Tabs>
		<div class="absolute top-0 right-2 w-1/4 items-center">
			<KlineTableSlider bind:this={klineTableSlider} />
		</div>
	</div>
</div>
